<!--
 * @Author: daidai
 * @Date: 2022-03-01 15:51:43
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-09-29 15:12:46
 * @FilePath: \web-pc\src\pages\big-screen\view\indexs\right-bottom.vue
-->
<template>


  <div style="position: relative">
    <div style="position: absolute;top:-82px; right: 110px;font-family: 'font1';font-size: 23px;">
      {{title}}
    </div>
    <div class="right_bottom" >

      <!--    <dv-capsule-chart :config="config" style="width:100%;height:260px" />-->
      <div class="items" v-for="(item,index) in data">
        <img v-if="index == 0" src="@/assets/img/切图/控损完成率ICON.png" alt="">
        <img v-if="index == 1" src="@/assets/img/切图/降档生效ICON.png" alt="">
        <img v-if="index == 2" src="@/assets/img/切图/降档受理ICON.png" alt="">
        <img v-if="index == 3" src="@/assets/img/切图/离网ICON.png" alt="">
        <div>{{item.name}}</div>
        <div style="margin-top: 20px">{{item.value}}</div>
      </div>
    </div>
  </div>

</template>

<script lang="ts" setup>

const {data,title} = defineProps(['data','title'])
</script>
<style lang='scss' scoped>
.right_bottom {
  margin-top: 60px;
  box-sizing: border-box;
  height: 100%;
  width: 100%;
  display: flex;
  align-items:center;
  justify-content: space-between;
  .items {
    img {
      width: 100px;
      height:100px
    }
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

}
</style>